<title>首页用户栏目内容信息列表</title>

<!-- 你的HTML代码 -->
<table id="sysUserColumnResTable" lay-filter="sysUserColumnResTable"></table>
<!-- 用户信息列表头部工具栏 -->
<script type="text/html" id="sysUserColumnResHeaderToolsBar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" wintitle="新增数据" areaw='500px' areah="600px"
           requrl="{{ serverPath.systemPath + layui.setter.openPath + layui.setter.sysLinkPath}}sysUserColumnRes/view/add"
           lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            <span>新增</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>
            <span>删除</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="query">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="clears">
            <i class="layui-icon layui-icon-refresh"></i>
            <span>重置</span>
        </a>
    </div>
    <form class="layui-form" action="" lay-filter="sysUserColumnResQueryForm" style="margin-right: 30px;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="selch table-top-filter">
                    <div class="table-filter-alone">
                        <label class="layui-form-label" style="width:66px;padding:9px 3px">主键</label>
                        <input type="text" class="layui-input filter-value"
                               name="Q_userColResId_SLR"
                               placeholder="主键"/>
                    </div>
                    <div class="table-filter-alone">
                        <label class="layui-form-label" style="width:66px;padding:9px 3px">栏目id</label>
                        <input type="text" class="layui-input filter-value"
                               name="Q_columnid_SLR"
                               placeholder="栏目id"/>
                    </div>
                    <div class="table-filter-alone">
                        <label class="layui-form-label" style="width:66px;padding:9px 3px">用户id</label>
                        <input type="text" class="layui-input filter-value"
                               name="Q_userid_SLR"
                               placeholder="用户id"/>
                    </div>
                    <div class="table-filter-alone">
                        <label class="layui-form-label" style="width:66px;padding:9px 3px">资源id</label>
                        <input type="text" class="layui-input filter-value"
                               name="Q_resid_SLR"
                               placeholder="资源id"/>
                    </div>
            </div>
        </div>
    </form>

</script>
<!-- 右侧工具栏 -->
<script type="text/html" id="sysUserColumnResRightToolsBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit" wintitle="修改数据" areaw='500px' areah="600px"
       requrl="{{serverPath.systemPath + layui.setter.openPath + layui.setter.sysLinkPath}}sysUserColumnRes/view/add?userColResId={{ d.userColResId }}">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
       requrl="{{ serverPath.systemPath + layui.setter.systemPath }}sysUserColumnRes/del">删除</a>
</script>
<script>
    //一般直接写在一个js文件中
    layui.use(['table', 'setter', 'form', 'common','totalFilter','commons'], function () {
        var table = layui.table;
        var setter = layui.setter;
        var form = layui.form;
        var common = layui.common;
        var commons = layui.commons;
        var totalFilter = layui.totalFilter;
        common.tableSort('sysUserColumnResTable');
        var tableH='full-70';
        var tableH=commons.tabHeight(tableH);

        //第一个实例
        table.render({
            elem: '#sysUserColumnResTable'
            ,height:tableH
            ,autoSort:true  //是否排序
            ,url: serverPath.systemPath + setter.systemPath + 'sysUserColumnRes/list'
            ,page: true //开启分页
            ,toolbar: '#sysUserColumnResHeaderToolsBar'
            ,method: 'post'
            ,autoSort: false
            ,cols: [[ //表头
                {field: 'sn', type: 'numbers', title: '序号', fixed: 'left'}
                , {type: 'checkbox', fixed: 'left'}
                        , {field: 'userColResId', title: '主键',sort:true}
                        , {field: 'columnid', title: '栏目id',sort:true}
                        , {field: 'userid', title: '用户id',sort:true}
                        , {field: 'resid', title: '资源id',sort:true}
                , {
                    fixed: 'right',
                    align: 'center',
                    title: '管理',
                    toolbar: '#sysUserColumnResRightToolsBar'
                }
            ]]
        });

        totalFilter.init('sysUserColumnResTable');

        //监听用户信息列表头部内部工具栏
        common.tableTool({
            name: 'sysUserColumnResTable'
            // 添加自定义方法使用
            // ,method:{
            //     add1Callback:function (obj) {
            //         console.log(obj);
            //     }
            // }
        });

        table.on('toolbar(sysUserColumnResTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            var _this = this;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: _this.getAttribute('wintitle'),
                        area: [_this.getAttribute('areaw'), _this.getAttribute('areah')],
                        content: _this.getAttribute('requrl')
                    });
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请先选择一行数据！');
                    } else {
                        array = [];
                        for (var i = 0; i < data.length; i++) {
                            array.push(data[i].userColResId);
                        }
                        layer.confirm('确定删除当前数据吗？', function (index) {
                            layer.close(index);
                            $.ajax({
                                url: serverPath.systemPath + setter.sysLinkPath + "sysUserColumnRes/del?id="+array,
                                type: "get",
                                contentType: 'application/json',
                                dataType: 'json',
                                success: function (data) {
                                    layer.alert(data.msg);
                                    //执行重载
                                    table.reload('sysUserColumnResTable', {
                                        page: {curr: 1, limit: 10},
                                    });
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    layer.alert(data.msg);
                                    //执行重载
                                    table.reload('sysUserColumnResTable', {
                                        page: {curr: 1, limit: 10},
                                    });
                                },
                            })
                        })
                    }
                    break;
                case "query":
                    common.tableConditionRender("sysUserColumnResTable","sysUserColumnResQueryForm",{where:{}},false);
                    break;
                case "clears":
                    common.tableConditionRender("sysUserColumnResTable","sysUserColumnResQueryForm",{where:{}},true);
                    break;

            };
        });

    });
</script>
<style>
    .tablesize .layui-table-tool {
        padding-bottom: 0;
    }

    .tablesize .layui-table-tool-temp {
        padding-right: 0;
    }

    .selch div {
        display: inline-block;
    }

    .selch .layui-form-label {
        width: 62px;
    }

    .selch div input {
        border-radius: 4px;
        float: left;
        width: 132px;
    }

    .selch .pullsel .xm-input {
        border-radius: 4px;
        width: 246px;
    }

    .selch .pullsel .xm-cz {
        margin-right: 11px !important;
    }

    .selch .pullsel .xm-select-parent dd > .xm-cz-group .xm-cz i {
        margin-right: 6px;
    }
</style>